<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title">薪资台账</span>
            </div>
            <div>
                <el-button type="primary">删除</el-button>
            </div>
            <div class="div1">
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                    :header-cell-style="{ textAlign: 'center' }" style="width: 100%" stripe>
                    <el-table-column type="selection" width="50" align="center">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center">
                    </el-table-column>

                    <el-table-column prop="name" label="方案名" align="center" width="150">
                    </el-table-column>
                    <el-table-column label="薪资周期" align="center" prop="money" width="180">
                    </el-table-column>
                    <el-table-column label="税期" align="center" prop="zq" width="190">
                    </el-table-column>
                    <el-table-column label="人数" align="center" prop="num" width="100">
                    </el-table-column>
                    <el-table-column label="状态" align="center"  width="200">
                        <template slot-scope="scope">
                            <div>
                                <span v-if="scope.row.bz === 0">未归档</span>
                                <span v-if="scope.row.bz === 1">已归档</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="生成时间" align="center" prop="ren" width="180">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" v-if="scope.row.bz === 0">
                                    <span>未归档</span>
                                </el-button>
                                <el-button type="text" v-if="scope.row.bz === 1">
                                    <span>已归档</span>
                                </el-button>
                                <el-button type="text">
                                    <span>删除</span>
                                </el-button>
                                <el-button type="text" @click="gopay">
                                    <span>详情</span>
                                </el-button>
                            </div>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="div2">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1" :page-size="10" layout="total, prev, pager, next" :total="num"
                    background>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
    
<script>
export default{
    data() {
        return {
            tableData: [
                {
                    name: "方案一",
                    money: "11/01~11/30",
                    zq: "2022/11",
                    num: "10",
                    bz: 0,
                    ren: "2022-11-30 21:39:08"
                },
                {
                    name: "方案二",
                    money: "11/01~11/30",
                    zq: "2022/11",
                    num: "10",
                    bz: 0,
                    ren: "2022-11-30 21:39:08"
                },
                {
                    name: "方案三",
                    money: "11/01~11/30",
                    zq: "2022/11",
                    num: "10",
                    bz: 1,
                    ren: "2022-11-30 21:39:08"
                },
                {
                    name: "方案四",
                    money: "11/01~11/30",
                    zq: "2022/11",
                    num: "10",
                    bz: 1,
                    ren: "2022-11-30 21:39:08"
                },
            ],
            num: 1,
            currentPage1: 1,
        };
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        gopay(){
            this.$router.push('/home/select1')
        }
    }
};
</script>
<style scoped>
body {
    overflow: hidden;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.el-button {
    width: 80px;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 20px;
}

.div1 {
    margin-top: 20px;
}

.div2 {
    margin-top: 20px;
    float: right;
    margin-bottom: 20px;
}

.tags {
    margin-left: -10px;
    height: 20px;
    line-height: 20px;
}
</style>